<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="__LAYUI__/layui/css/layui.css" media="all" rel="stylesheet">
		<link href="__LAYUI__/adminui/dist/css/admin.css" media="all" rel="stylesheet">
	</head>
	<style>
		.layui-icon-ok {
			color: #c2c2c2 !important;
		}

		.layui-form-checked:hover>div,
		.layui-form-checked>div {
			background-color: #16baaa !important;
		}

		.layui-form-checked:hover>i,
		.layui-form-checked>i {
			color: #16baaa !important;
			border-color: #16baaa !important;
		}
		#UploadList tr td,th{text-align: center!important;}
		.gc_img{cursor: pointer;}
		.layui-progress-bar{background-color:#16baaa!important;}
		.layui-upload-drag{padding: 20px;width: 150px;margin-top: 12px;}
		.w-e-toolbar{border: 1px solid #eee!important;}
		.w-e-text-container{border: 1px solid #eee!important;border-top: none!important;}
	</style>
	{include file="info" /}
	<body>
		<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-body">
							<div class="layui-tab">
								<div class="layui-tab-content">
									<div class="layui-tab-item layui-show">
										<div class="layui-form layui-form-pane">
											<div class="layui-form-item">
												<label class="layui-form-label">标题<em>*</em></label>
												<div class="layui-input-block">
													<input type="text" name="title" value="{$info.title?:''}"
														placeholder="请输入标题" class="layui-input">
												</div>
											</div>
											<div class="layui-form-item layui-form-text">
												<label class="layui-form-label">上传</label>
												<div class="layui-upload-drag" id="UploadFiles">
												  <i class="layui-icon layui-icon-upload"></i> 
												  <div>点击上传</div>
												</div>
												<div class="layui-input-block gc_upload {notempty name="$info"}{if empty($info.images)}layui-hide{/if}{else/}layui-hide{/notempty}">
													<div class="layui-upload-list">
														<table class="layui-table">
															<colgroup>
																<col style="min-width: 100px;">
																<col width="120">
																<col width="150">
																<col width="100">
																<col width="150">
															</colgroup>
															<thead>
																<th>文件<i class="layui-icon layui-icon-tips" style="margin-left: 5px;"></i></th>
																<th>大小</th>
																<th>进度</th>
																<th>状态</th>
																<th>操作</th>
															</thead>
															<tbody id="UploadList">
																{notempty name="$info.images"}
																	{volist name="$info.images" id="vo"}
																		<tr>
																			<td><a class="gc_img" data-url="{$vo.topic?:''}">{$vo.name?:''}</a></td>
																			<td>{$vo.size?:''}kb</td>
																			<td><div class="layui-progress">
																					<div class="layui-progress-bar" lay-percent="100%"></div>
																				</div>
																			</td>
																			<td>
																				<button class="layui-btn layui-btn-xs"> 成功 </button>
																			</td>
																			<td>
																				<button class="layui-btn layui-btn-xs layui-hide"></button>
																				<button class="layui-btn layui-btn-xs layui-btn-danger gc_delete" data-id="{$vo.id}"> 删除 </button>
																			</td>
																		</tr>
																	{/volist}
																{/notempty}
															</tbody>
														</table>
													</div>
													<button type="button" class="layui-btn layui-btn-sm"
														id="UploadAction">上传</button>
													<input id="image" type="hidden" name="image" value="{$info.image?: ''}">
												</div>
											</div>
											<!-- 编辑器 start-->
											<div class="layui-form-item layui-form-text">
												<label class="layui-form-label">内容</label>
												<div class="layui-input-block">
													<div id="TextDemo">
													</div>
													<textarea name="content" id="content"
														class="layui-textarea layui-hide">{$info.content ?: ''}</textarea>
												</div>
											</div>
											<!-- 编辑器 end -->
											<div class="layui-form-item layui-form-text">
												<label class="layui-form-label">备注</label>
												<div class="layui-input-block">
													<textarea name="postscript" placeholder="请输入备注"
														class="layui-textarea">{$info.postscript?:''}</textarea>
												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label">创建时间</label>
												<div class="layui-input-inline">
													{notempty name="$info"}
													<input type="text" class="layui-input" disabled
														value="{:date('Y-m-d H:i:s',$info.create_time)}">
													{else/}
													<input type="text" class="layui-input" disabled
														value="{:date('Y-m-d H:i:s',time())}">
													{/notempty}
												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label">状态</label>
												<div class="layui-input-inline">
													{notempty name="$info"}
													<input type="checkbox" name="status" value="{$info.status?:1}"
														lay-skin="tag" lay-filter="tagstatus"
														title="{$info.status==1?'启用':'禁用'}" {if
														$info.status==1}checked{/if}>
													{else/}
													<input type="checkbox" name="status" value="1" lay-skin="tag"
														lay-filter="tagstatus" title="启用" checked>
													{/notempty}
												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label">置顶</label>
												<div class="layui-input-inline">
													{notempty name="$info"}
													<input type="checkbox" name="top" value="{$info.top?:1}"
														lay-skin="tag" lay-filter="tagtop"
														title="{$info.top==1?'是':'否'}" {if $info.top==1}checked{/if}>
													{else/}
													<input type="checkbox" name="top" value="2" lay-skin="tag2"
														lay-filter="tagtop" title="否">
													{/notempty}
												</div>
											</div>
											{notempty name="$info"}
											<input type="hidden" name="id" value="{$info.id}">
											{/notempty}
											<div
												class="layui-form-item {if MyAuto('myadmin','article','edit')==false}layui-hide{/if}">
												<button class="layui-btn" lay-submit lay-filter="submit"> 保存 </button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script src="https://unpkg.com/wangeditor/dist/wangEditor.min.js"></script>
<script>
	layui.use(["layer", "jquery", "form"], function() {
		var layer = layui.layer;
		var $ = layui.jquery;
		var form = layui.form;
		var editor = new window.wangEditor("#TextDemo");
		editor.config.showLinkImg = false; // 网络图片
		editor.config.showLinkVideo = false; // 网络视频
		editor.config.pasteFilterStyle = false; // 粘贴格式
		editor.config.uploadImgServer = "{:url('article/upload')}"; // 上传接口
		editor.config.uploadFileName = "file"; // 定义file
		editor.config.uploadImgMaxLength = 1; // 图片数量
		// 自定义上传图片事件
		editor.config.uploadImgHooks = {
			customInsert: function(insertImgFn, result) {
				if (result.code == 0) {
					//top.notify.success(result.msg, "topRight");
					insertImgFn("/" +result.data.topic);
				} else {
					top.notify.error(result.msg, "topRight");
				}
			}
		}
		// 监听变化
		editor.config.onchange = function(newHtml) {
			//console.log(newHtml)
			$("#content").val(newHtml);
		};
		// 自定义菜单
		editor.config.menus = ["head", "bold", "fontSize", "fontName", "italic", "underline", "strikeThrough",
			"foreColor","backColor", "splitLine", "lineHeight", "list", "justify", "image"
		];
		// 	完成配置
		editor.create();
		// 把图文信息的值通过innerHTML赋值给编辑器
		window.onload = function() {
			// 获取图文信息值
			var content = $("#content").val();
			//console.log(content)
			editor.txt.html(content);
		}

		form.on("checkbox(tagstatus)", function(data) {
			if (data.elem.checked) {
				$("input[name='status']").val(1).attr("title", "启用").attr("checked", true);
				$("input[name='status']").next("div").find("div").text("启用");

			} else {
				$("input[name='status']").val(2).attr("title", "禁用").removeAttr("checked");
				$("input[name='status']").next("div").find("div").text("禁用");
			}
		});
		form.on("checkbox(tagtop)", function(data) {
			if (data.elem.checked) {
				$("input[name='top']").val(1).attr("title", "是").attr("checked", true);
				$("input[name='top']").next("div").find("div").text("是");
			} else {
				$("input[name='top']").val(2).attr("title", "否").removeAttr("checked");
				$("input[name='top']").next("div").find("div").text("否");
			}
		});
		form.on("submit(submit)", function(data) {
			if (!data.field.status) {
				data.field.status = "2";
			}
			$.ajax({
				url: "{:url('article/edit')}",
				data: data.field,
				type: "post",
				success: function(res) {
					if (res.code == 0) {
						top.notify.success(res.msg, "topRight");
						setTimeout(function() {
							var index = parent.layer.getFrameIndex(window
								.name); // 先得到当前 iframe 层的索引
							parent.layer.close(index); // 再执行关闭
						}, 1000)
					} else {
						top.notify.error(res.msg, "topRight");
					}
				}
			})
			return false;
		})
		// 删除图片
		$(".gc_delete").on("click", function(){
			var imgid=$(this).attr("data-id");
			// 删除参数id
			var image=$("#image").val();
			var arr=image.split(",");
				arr.splice($.inArray(imgid,arr),1);
			$("#image").val(arr); 
			// 清除对应的tr
			$(this).parent().parent().remove();
			return false; 
		});
		
		// 查看图片
		$(".gc_img").on("click", function(){
			var imgurl=$(".gc_img").attr("data-url");
			var imgHtml = "<img src='" + imgurl + "' style='width:300px;height:300px;padding: 25px;' />";
			top.layer.open({
				type: 1,
				title: false,
				shade: 0.5,
				closeBtn: 0,
				shadeClose: true,
				content: imgHtml
			});
			return false;
		});
		// tips 提示框
		$(".layui-icon-tips").on({
			mouseenter: function() {
				tips = layer.tips("<span >点击查看</span>", this, {
					tips: [1, "#16baaa"]
				});
			},
			mouseleave: function() {
				layer.close(tips);
			}
		});
	});
</script>
<script>
	layui.use(["upload", "element", "jquery"], function() {
		var upload = layui.upload;
		var element = layui.element;
		var $ = layui.jquery;
		// 制作多文件上传表格
		var uploadListIns = upload.render({
			
			elem: "#UploadFiles",
			elemList: $("#UploadList"), // 列表元素对象
			url: "{:url('article/upload')}", // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
			accept: "images",
			acceptMime: "image/*",
			multiple: true,
			number: 3,
			auto: false,
			bindAction: "#UploadAction",
			choose: function(obj) {
				$(".gc_upload").removeClass("layui-hide");
				var that = this;
				var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列
				// 读取本地文件
				obj.preview(function(index, file, result) {
					var tr = $(["<tr id='upload-" + index + "'>",
						"<td><a class='gc_img'>" + file.name + "</a></td>",
						"<td>" + (file.size / 1024).toFixed(1) + "kb</td>",
						"<td><div class='layui-progress' lay-filter='progress-demo-" +
						index +
						"'><div class='layui-progress-bar' lay-percent=''></div></div></td>",
						"<td>",
						"<button class='layui-btn layui-btn-xs layui-btn-danger'> 待传 </button>",
						"</td>",
						"<td>",
						"<button class='layui-btn layui-btn-xs demo-reload layui-hide'> 重传 </button>",
						"<button class='layui-btn layui-btn-xs layui-btn-danger demo-delete'> 删除 </button>",
						"<button class='layui-btn layui-btn-xs layui-btn-danger gc_delete  layui-hide'> 删除 </button>",
						"</td>",
						"</tr>"
					].join(""));
					// 单个查看
					tr.find(".gc_img").on("click", function(){
						var imgurl=$(this).attr("data-url");
							if(!imgurl){
								var imgurl=result;
							}
						var imgHtml = "<img src='" + imgurl + "' style='width:300px;height:300px;padding: 25px;' />";
						top.layer.open({
							type: 1,
							title: false,
							shade: 0.5,
							closeBtn: 0,
							shadeClose: true,
							content: imgHtml
						});
						return false;
					});
					tr.find(".gc_delete").on("click", function(){
						//删除图片
						var imgid=$(this).attr("data-id");
						// 删除参数id
						var image=$("#image").val();
						var arr=image.split(",");
							arr.splice($.inArray(imgid,arr),1);
						$("#image").val(arr); 
						// 清除对应的tr
						delete files[index]; // 删除对应的文件
						tr.remove(); // 删除表格行
						uploadListIns.config.elem.next()[0].value = "";
					})
					// 单个重传
					tr.find(".demo-reload").on("click", function() {
						obj.upload(index, file);
					});
					// 删除
					tr.find(".demo-delete").on("click", function() {
						delete files[index]; // 删除对应的文件
						tr.remove(); // 删除表格行
						// 清空 input file 值，以免删除后出现同名文件不可选
						uploadListIns.config.elem.next()[0].value = "";
					});
					that.elemList.append(tr);
					element.render("progress"); // 渲染新加的进度条组件
				});
			},
			done: function(result, index, upload) { // 成功的回调
				var res=JSON.parse(result);
				var that = this;
				if(res.code == 0){ // 上传成功
					var tr = that.elemList.find("tr#upload-" + index)
					var tds = tr.children();
					delete this.files[index]; // 删除文件队列已经上传成功的文件
					
					// 成功后的操作data-id
					tds.eq(0).find("a").html(res.data.name).attr("data-url",res.data.topic);
					tds.eq(3).html("<button class='layui-btn layui-btn-xs'> 成功 </button>");
					tds.eq(4).find(".demo-delete").addClass("layui-hide");
					tds.eq(4).find(".gc_delete").removeClass("layui-hide").attr("data-id",res.data.pid);
					var image=$("#image").val();
					if(image==""){
						var newimage=res.data.pid;
					}else{
						var newimage=image+","+res.data.pid;
					}
					$("#image").val(newimage);
					return;
				}else{
					top.notify.error(res.msg, "topRight");
				}
				this.error(index, upload);
			},
			/* allDone: function(obj) { // 多文件上传完毕后的状态回调
				//console.log(obj)
			}, */
			error: function(index, upload) { // 错误回调
				
				var that = this;
				var tr = that.elemList.find("tr#upload-" + index);
				var tds = tr.children();
				// 显示重传
				tds.eq(3).html("<button class='layui-btn layui-btn-xs'> 失败 </button>"); 	// 清空操作
				tds.eq(4).find(".demo-reload").removeClass("layui-hide");
			},
			progress: function(n, elem, e, index) { // 注意：index 参数为 layui 2.6.6 新增
				// console.log(n)
				element.progress("progress-demo-" + index, n + "%"); // 执行进度条。n 即为返回的进度百分比
			}
		});
	});
</script>